/**  定义View构造函数，用于对视图进行操作   Create By YangHuiJun
 * 
 * @param  container 界面的容器 
 * @param  score 显示分数的容器
 * @param  game_result 游戏结果容器
 */
const View = function (container,score,game_result) {
    this.container = container;
    this.score = score;
    this.game_result = game_result;
    //nums用于存储棋子元素
    this.nums = {};
}

/**
 * 界面的初始化
 */
View.prototype.init = function () {
    //初始化分数
    this.setScore(0);
    //调用工具函数创建棋盘
    Utils.createElem('div', this.container, panel => {
        $(panel).addClass('container');
        //调用工具函数创建棋子位置的背景方格
        for (let x = 0; x < 4; x++) {
            for (let y = 0; y < 4; y++) {
                Utils.createElem('div', panel, cell => {
                    $(cell).addClass('game-cell').css({ top: this.count(x), left: this.count(y) });
                });
            }
        }
    });
}

/** 显示得分
 * 
 * @param  score 分数
 */
View.prototype.setScore = function(score){
    $(this.score).text(score);
}

/**
 * Create By YangHUiJun
 */
/**  计算棋子的相对位置的公式
 * 
 * @param  n 行数或列数
 */
View.prototype.count = function (n) {
    return 20 + n * (100 + 20);
}
/**  创建棋子
 * 
 * @param  x 要创建棋子的位置的横坐标
 * @param  y 要创建棋子的位置的纵坐标
 * @param  num 要创建棋子的文本值
 */
View.prototype.addNum = function (x, y, num) {

    //调用工具函数，在棋盘上创建棋子
    Utils.createElem('div', document.querySelector('.container'), numView => {
        //对创建好的棋子进行处理
        $(numView).addClass('num num' + num);
        $(numView).text(num).css({
            top: this.count(x) + parseInt(100 / 2),
            left: this.count(y) + parseInt(100 / 2)
        });
        $(numView).animate({
            width: 100 + 'px',
            height: 100 + 'px',
            lineHeight: 100 + 'px',
            top: this.count(x),
            left: this.count(y)
        }, 100);

        //用对应的位置的横、纵坐标做键值，存储当前创建好的棋子
        this.nums[x + '-' + y] = numView;
    });

}


/**
 * Create By YangHUiJun
 */
/**  对相等的相邻元素相加合并移动
 * 
 * @param  view1 移动方向上的第一个元素的下标数据对象，x为横坐标，y为纵坐标
 * @param  view2 与第一个元素相加的下一个相邻元素的下标数据对象，x为横坐标，y为纵坐标
 * @param  after 最终位置对象数据，x为横坐标，y为纵坐标;num为合并后的值
 */
View.prototype.addMove = function (view1, view2, after) {

    //定义键值
    let view1_index = view1.x + '-' + view1.y;
    let view2_index = view2.x + '-' + view2.y;
    //找到需要操作的元素，view1_Elem为移动方向上的第一个元素，view2_Elem为与view1_Elem第一个相邻的元素
    let view1_Elem = this.nums[view1_index];
    let view2_Elem = this.nums[view2_index];
    //获取相加合并后的文本值
    let num = after.num;

    //用新的位置的键值记录要移动到该位置的元素
    this.nums[after.x + '-' + after.y] = this.nums[view2_index];
    //删除要移动的元素原位置的键值和值
    delete this.nums[view2_index];

    //对要合并的两个元素进行移动
    $(view1_Elem).animate({
        top: this.count(after.x),
        left: this.count(after.y)
    }, 100);

    $(view2_Elem).finish().animate({
        top: this.count(after.x),
        left: this.count(after.y)
    }, 200, function () {
        //对移动合并后的元素修改类名，并修改text
        $(view2_Elem).text(num).addClass('num' + num).removeClass('num' + num / 2);
    });

    //设置定时器，等待合并移动完成，再把view1_Elem移除，实现合并效果
    setTimeout(function () {
        $(view1_Elem).remove()
    }, 200);

}

/** 对元素进行移动
 * 
 * @param  view1 所要移动的元素数据对象，x为横坐标，y为纵坐标
 * @param  after 最终位置的数据对象，x为横坐标，y为纵坐标
 */
View.prototype.move = function (view1,after) {

    //定义键值
    let view1_index = view1.x + '-' + view1.y;
    let after_index = after.x + '-' + after.y;

    //用新的位置的键值记录要移动到该位置的元素
    this.nums[after_index] = this.nums[view1_index];
    //删除要移动的元素原位置的键值和值
    delete this.nums[view1_index];

    //对元素进行移动
    $(this.nums[after_index]).animate({
        top: this.count(after.x),
        left: this.count(after.y)
    }, 200);

}

/**
 * Create By YangHUiJun
 */